import { computed, defineComponent, ref } from 'vue';
import Basic from './Basic.vue';
import CustomButton from './CustomButton.vue';
import CustomDropdownIcon from './CustomDropdownIcon.vue';
import Disable from './Disable.vue';
import LabelSlot from './LabelSlot.vue';
import Link from './Link.vue';
import Model from './Model.vue';
import Split from './Split.vue';
import VariousContent from './VariousContent.vue';
import Demo from './Demo.vue';

export default defineComponent({
  name: 'App',
  props: {},
  emits: [],

  setup(props, { attrs, emit, expose, slots }) {
    expose({});

    return () => {
      return (
        <div class='block'>
          <div class='block-'>
            <h5 class='title'>Demo</h5>
            <Demo />
          </div>
          <div class='block-'>
            <h5 class='title'>Basic</h5>
            <Basic />
          </div>
          <div class='block-'>
            <h5 class='title'>CustomButton</h5>
            <CustomButton />
          </div>
          <div class='block-'>
            <h5 class='title'>CustomDropdownIcon</h5>
            <CustomDropdownIcon />
          </div>
          <div class='block-'>
            <h5 class='title'>Disable</h5>
            <Disable />
          </div>
          <div class='block-'>
            <h5 class='title'>LabelSlot</h5>
            <LabelSlot />
          </div>
          <div class='block-'>
            <h5 class='title'>Link</h5>
            <Link />
          </div>
          <div class='block-'>
            <h5 class='title'>Model</h5>
            <Model />
          </div>
          <div class='block-'>
            <h5 class='title'>Split</h5>
            <Split />
          </div>
          <div class='block-'>
            <h5 class='title'>VariousContent</h5>
            <VariousContent />
          </div>
        </div>
      );
    };
  },
});
